<template>
    <view class="body">
      <img class="img-Bg" src="https://ainengli.hzjrsw.com/jkhx/common/assessment-result-bg.png" alt="" />
      <view class="result">
          <view v-for="(item, index) of contentList" :key="index" class="result-item">
            <view class="result-title">
              <text>{{ item.title }}</text>
            </view>
            <view class="result-content">
              <text>
                {{ item.content }}
              </text>
            </view>
          </view>
          <view class="title">
            <view class="line"></view>
            <text>推荐运动</text>
          </view>
          <view v-for="(item, index) of recommedList" :key="index" class="result-item">
            <view class="result-content">
              <view class="recommend-title">{{ item.title }}：</view>
              <text>
                {{ item.content }}
              </text>
            </view>
          </view>
      </view>
      <view class="fixed">
        <button @tap="begin" class="fix-btn">开始运动</button>
        <view @tap="reStart" class="restart">重新评估</view>
      </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { question_score } from '../../../api/sleep'

const contentList = ref([
    {
        title: '运动频率',
        content: '根据问卷结果显示，您的运动频率过低，难以获得理想的运动效果，根据《ACSM运动测试与运动处方指南》推荐，建议您每周运动至少3次'
    },
    {
        title: '运动形式',
        content: '您的运动中缺乏有氧运动，建议您在运动中加入有氧运动，有助于提高您的心肺功能，降低心脑血管患病几率。'
    },
    {
        title: '运动时长',
        content: '您的运动时长较低，建议您增加运动时长。'
    },
    {
        title: '运动强度',
        content: '您目前的运动强度较低，建议您提高运动强度来获得更好的运动效果。'
    }
])
const userInfo = ref()
const recommedList = ref([
    {
        title: '运动频率',
        content: '每周4次'
    },
    {
        title: '有氧方案',
        content: '有氧运动推荐：户外跑/游泳\n有氧运动时长：15分钟'
    },
    {
        title: '抗阻方案',
        content: '抗阻运动推荐：中等强度（65% 1-RM）至较大强度（78% 1-RM）抗阻运动以增加肌肉力量\n进行8-10种不同动作练习\n每组8-10次，重复2-4组'
    }
])

onLoad((options: any) => {
    userInfo.value = JSON.parse(uni.getStorageSync('userInfo')).patientInfo

    const params = {
      id: options.id,
      empi: userInfo.value.empi
    }
    question_score(params).then((res) => {
      if (res.code == 0) {
        let jsonContent = JSON.parse(res.data.conclusion)
        contentList.value = jsonContent.assessmentResult
        recommedList.value = jsonContent.recommendedExercise
      }
    })
})

const begin = () => {
    uni.redirectTo({ url: '/module/src/pages/sports/sportsPlan/index' })
}

const reStart = () => {
    uni.redirectTo({ url: '/module/src/pages/sports/sportsQuestionnaire/fillin' })
}

</script>

<style lang="scss" scoped>
.body {
    position: relative;
    height: 100%;
    padding: 34rpx 32rpx;
    padding-bottom: calc(200rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
    overflow: auto;

    .img-Bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 328rpx;
    }
    .result {
        background: #FFFFFF;
        border-radius: 24rpx;
        padding: 32rpx;
        margin-top: 210rpx;
        .result-item {
            margin-bottom: 32rpx;
            &:last-child {
                margin: 0;
            }
            .result-title {
                display: inline-block;
                background: #00d1b6;
                border-radius: 24rpx 0 24rpx 0;
                padding: 8rpx 24rpx;
                font-weight: 700;
                font-size: 28rpx;
                color: #FFFFFF;
            }
            .result-content {
                background: rgba(0,209,182,0.05);
                border-radius: 8rpx;
                padding: 32rpx 24rpx;
                text-align: justify;
                line-height: 48rpx;
                font-weight: 400;
                font-size: 30rpx;
                color: #0C3A34;
                .recommend-title {
                    font-weight: 700;
                    font-size: 32rpx;
                    color: #0C3A34;
                    margin-bottom: 16rpx;
                }
            }
        }
        .title {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 24rpx;
            font-size: 36rpx;
            font-weight: 700;
            color: #222;
            margin-top: 16rpx;
            .line {
                width: 8rpx;
                height: 36rpx;
                margin-right: 16rpx;
                background: #00d1b6;
                border-radius: 0 8rpx;
            }
        }
    }
    .fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 10;
        box-sizing: border-box;
        width: 100%;
        padding: 24rpx 32rpx;
        padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
        background: #fff;

        .fix-btn {
            width: 100%;
            font-size: 32rpx;
            font-weight: 700;
            color: #fff;
            background: #00d1b6;
            border-radius: 44rpx;
        }
        .restart {
            font-weight: 400;
            font-size: 30rpx;
            color: #00D1B6;
            margin-top: 16rpx;
            text-align: center;
        }
    }
}
</style>
  